<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>借书记录</title>
		<link rel="stylesheet" href="../../component/pear/css/pear.css" />
	</head>
	<body class="pear-container">
	<!--搜索组件-->
		<div class="layui-card">
			<div class="layui-card-body">
				<form class="layui-form" action="">
					<div class="layui-form-item">
						<div class="layui-form-item layui-inline">
							<label class="layui-form-label">书名</label>
							<div class="layui-input-inline">
								<input type="text" name="title" placeholder="" class="layui-input">
								<input type="hidden" name="uid" placeholder="" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item layui-inline">
							<label class="layui-form-label">ISBN</label>
							<div class="layui-input-inline">
								<input type="text" name="isbn" placeholder="" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item layui-inline">
							<label class="layui-form-label">作者</label>
							<div class="layui-input-inline">
								<input type="text" name="author" placeholder="" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item layui-inline" style="width: 450px">
							<label class="layui-form-label">借书时间</label>
								<div class="layui-input-inline">
									<input type="text" style="width: 300px" class="layui-input" id="test10" placeholder=" - " name="botime">
								</div>
						</div>
						<div class="layui-form-item layui-inline">
							<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="borrow-query">
								<i class="layui-icon layui-icon-search"></i>
								查询
							</button>
							<button type="reset" class="pear-btn pear-btn-md">
								<i class="layui-icon layui-icon-refresh"></i>
								重置
							</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	<!--信息显示表格组件-->
		<div class="layui-card">
			<div class="layui-card-body">
				<table id="borrow-table" lay-filter="borrow-table"></table>
			</div>
		</div>
	<div style="display: none" id="historydetail">
		<form class="layui-form" action="">
			<div class="mainBox">
				<div class="main-container">
					<table border="1" cellpadding="0">
						<thead align="center">
						<td>书名</td>
						<td>借书时间</td>
						<td>最后还书时间</td>
						<td>作者</td>
						<td>类别</td>
						</thead>
						<tbody align="center">
						<td width="80" id="title"></td>
						<td width="180" id="botime"></td>
						<td width="180" id="lasttime"></td>
						<td width="80" id="author"></td>
						<td width="80" id="btype"></td>
						</tbody>
					</table>
				</div>
			</div>
			<div class="bottom">
				<div class="button-container">
					<button id="back" type="button" class="layui-btn layui-btn-sm layui-btn-danger" lay-submit="">
						还书
					</button>
					<button id="close" type="button" class="layui-btn layui-btn-sm" lay-submit="" lay-filter="close">
						<i class="layui-icon layui-icon-close"></i>
						关闭
					</button>
				</div>
			</div>
		</form>
	</div>
	<!--查看详情组件-->
		<script type="text/html" id="user-bar">
			{{# if(d.backtime != null && d.backtime != ""){}}
			<button class="layui-btn layui-btn-disabled" >已归还</button>
			{{# }else{ }}
			<button class="layui-btn" lay-event="detail">详情</button>
			{{#}}}
		</script>
		<!--日期格式化组件-->
		<script type="text/html" id="Time">
			{{layui.util.toDateString(d.createTime, 'yyyy-MM-dd')}}
		</script>

		<script src="../../component/layui/layui.js"></script>
		<script src="../../component/pear/pear.js"></script>
		<script>
			layui.use(['table', 'form', 'jquery','common','laydate'], function() {
				let table = layui.table;
				let form = layui.form;
				let $ = layui.jquery;
				let common = layui.common;
                var laydate = layui.laydate;
				let MODULE_PATH = "operate/";
				let cols = [
					[
						{
							title: '书名',
							field: 'title',
							align: 'center'
						},
						{
							title: '出版社',
							field: 'publish',
							align: 'center'
						},
						{
							title: '作者',
							field: 'author',
							align: 'center'
						},
						{
							title: '位置信息',
							field: 'bloc',
							align: 'center'
						},
                        {
                            title: '借书时间',
                            field: 'botime',
                            align: 'center',
							// templet: "#Time",
							sort: true,
                        },
						{
							title: '归还时间',
							field: 'backtime',
							align: 'center',
							templet: function (d) {
								if (d.backtime == null){
									 d.backtime = "未归还"
								}else {
									d.backtime = d.backtime
								}
								return d.backtime
							},
							sort: true,
						},
						{
							title: '操作',
							toolbar: '#user-bar',
							align: 'center'
						}
					]
				]

				table.render({
					elem: '#borrow-table',
					url: 'http://localhost:8080/borrows/selectByUser',
					where: {uid:window.sessionStorage.getItem("uid")},
					page: true,
					cols: cols,
					skin: 'line',
					toolbar: '#user-toolbar',
					defaultToolbar: [{
						title: '刷新',
						layEvent: 'refresh',
						icon: 'layui-icon-refresh',
					}, 'filter', 'print', 'exports'],
				});

				table.on('tool(borrow-table)', function(obj) {
					if (obj.event === 'detail') {
						window.detail(obj);
					} else if (obj.event === 'edit') {
						window.edit(obj);
					}
				});

				table.on('toolbar(borrow-table)', function(obj) {
					if (obj.event === 'add') {
						window.add();
					} else if (obj.event === 'refresh') {
						window.refresh();
					} else if (obj.event === 'batchRemove') {
						window.batchRemove(obj);
					}
				});

				form.on('submit(borrow-query)', function(data) {
					// var botime_start =( data.field.botime).substr(0,19)
					// var botime_end = (data.field.botime).substr(22,40)
					// data.field.botime = botime_start + "'" + "and" + "'" +botime_end
					data.field.uid = window.sessionStorage.getItem('uid')
					// console.log(data.field.uid)
					console.log(data.field)
					table.reload('borrow-table', {
						where: data.field,
						page: {curr:1},
					})
					return false;
				});
				var boid
				var bid
				window.detail = function(obj) {
                    var index = layer.open({
                        type: 1,
                        title: '详情',
                        shade: 0.1,
                        area: [common.isModile()?'100%':'600px', common.isModile()?'100%':'200px'],
                        content: $('#historydetail'),
						success:function (layero,index){
                        	var title_inp = $(layero).find("#historydetail").contents().find("#title");
                        	title_inp.text(obj.data.title)

							var botime_inp = $(layero).find("#historydetail").contents().find("#botime");
							botime_inp.text(layui.util.toDateString(obj.data.botime, 'yyyy-MM-dd HH:mm:ss'))

							var lasttime_inp = $(layero).find("#historydetail").contents().find("#lasttime");
							lasttime_inp.text(layui.util.toDateString(obj.data.lasttime, 'yyyy-MM-dd HH:mm:ss'))

							var author_inp = $(layero).find("#historydetail").contents().find("#author");
							author_inp.text(obj.data.author)

							var btype_inp = $(layero).find("#historydetail").contents().find("#btype");
							btype_inp.text(obj.data.btype)

							boid = obj.data.boid
							bid = obj.data.bid
						}
                    });
					$('#historydetail').on('click','#close',function (){
						layer.close(index);
					})
					$('#historydetail').on('click','#back',function (){
						$.get(
								"http://localhost:8080/borrows/back",
								{boid:boid,bid:bid},
								function (){
									layer.close(index);
									table.reload("borrow-table")
									layer.msg("归还成功",{icon:6,time:2000})
								}
						)
					})
				}
                //日期时间范围
                laydate.render({
                    elem: '#test10'
                    ,type: 'datetime'
                    ,range: true
                });

				window.refresh = function(param) {
					table.reload('borrow-table');
				}
			})
		</script>
	</body>
</html>
